---
title: MPAs vs. SPAs
description: >-
  Понимание компромиссов между архитектурой многостраничных приложений (MPA) и
  одностраничных приложений (SPA) является ключом к пониманию того, что отличает
  Astro от других веб-фреймворков.
i18nReady: true
---

Понимание компромиссов между архитектурой многостраничных приложений (MPA) и одностраничных приложений (SPA) является ключом к пониманию того,
что отличает Astro от других веб-фреймворков как Next.js и Remix.

## Терминология

**Многостраничное приложение (MPA)** это веб-сайт, состоящий из нескольких HTML-страниц, в основном отображаемых на сервере.
Когда вы переходите на новую страницу, ваш браузер запрашивает новую страницу HTML с сервера.
**Astro это MPA фреймворк.** 
К MPA фреймворкам так же относятся Ruby on Rails, Python Django, PHP Laravel, WordPress, Joomla, Drupal и генераторы статичных сайтов, как Eleventy или Hugo.

**Одностраничное приложение (SPA)** это веб-сайт, состоящий из одного приложения JavaScript, которое загружается в браузере пользователя, а затем отображает HTML локально.
SPA могут *также* генерировать HTML на сервере, но SPA уникальны своей способностью запускать ваш сайт как JavaScript приложение
в браузере, для отображения новой HTML страницы, при навигации. К SPA фреймворкам относятся Next.js, Nuxt, SvelteKit, Remix, Gatsby, и
Create React App.

## Astro против других MPA

Astro это MPA фреймворк.
Однако Astro также уникален по сравнению с другими MPA фреймворками.
Его главное отличие заключается в том, что он использует JavaScript в качестве серверного языка и среды выполнения.
Традиционные MPA фреймворки заставили бы вас написать другой язык на сервере (Ruby, PHP и т.д.) и JavaScript в браузере.
В Astro вы всегда просто пишете JavaScript, HTML и CSS. Таким образом, вы можете рендерить свои UI компоненты (React или Svelte)
как на сервере, так и на клиенте.

В результате разработчики получают удобство разработки, как при работе с Next.js и другими современными веб-фреймворками,
но с характеристиками производительности более традиционной архитектуры MPA сайта.

## MPA против SPA

Есть три основных различия, о которых следует помнить при сравнении MPA и SPA:

#### Server rendering (MPA) против client rendering (SPA)

В MPA, большая часть HTML-кода вашей страницы рендерится на сервере.
В SPA, большая часть HTML отображается локально с помощью запуска JavaScript в браузере.
Это оказывает значительное влияние на поведение сайта, производительность и SEO.

Рендеринг вашего HTML в браузере может показаться более быстрым вариантом по сравнению с запросом его с сервера.
Однако верно и обратное утверждение. SPA будет работать медленнее при загрузке первой страницы по сравнению с MPA,
если не используется рендеринг сервера.
Это связано с тем, что SPA необходимо загрузить, спарсить и запустить все JavaScript приложение в браузере только для отображения
любого HTML на странице. Потом вашему SPA, скорее всего, все равно потребуется получить данные от сервера, что приведет к еще большему времени ожидания до
завершения загрузки вашей страницы.

Большинство SPA фреймворков попытаются смягчить эту проблему с производительностью, добавив серверный рендеринг при первой загрузке страницы.
Это улучшение, но оно создает новые сложности из-за того, что ваш веб-сайт теперь может отображаться
несколькими способами и в нескольких средах (сервер, браузер).
Это также приводит к новой проблеме "uncanny valley", когда ваш сайт выглядит загруженным (HTML), но не отвечает, поскольку
логика JavaScript приложения все еще загружается в фоновом режиме.

MPA рендерят весь HTML на сервере и часто не требуют большого количества (если вообще требуется) JavaScript для запуска.
Это дает MPA гораздо быструю первую загрузку, чем SPA, что очень важно для веб-сайтов, ориентированных на контент.
Но есть и обратная сторона: последующая навигация по страницам не может извлечь выгоду из локального рендеринга.


#### Server routing (MPA) против client routing (SPA)

Где находится роутер вашего веб-сайта?
В MPA каждый запрос к серверу решает, каким HTML отвечать, поэтому логика роутера находится на сервере.
В SPA ваш роутер запускается в браузере и перехватывает любую навигацию для отображения новой страницы, не обращаясь к серверу.

Это компромисс, аналогичный описанному выше: MPA обеспечивают более быструю первую загрузку,
в то время как SPA могут предложить более быструю загрузку второй или третьей страницы после полной загрузки приложения JavaScript в браузере.

SPA также могут предлагать более мощные переходы при навигации по страницам, поскольку они многое контролируют при рендеринге страниц.
MPA, в свою очередь используют такой инструмент, как [Turbo](https://turbo.hotwired.dev/) от Hotwire, который 
имитирует роутинг на клиенте, также управляя навигацией в браузере.
HTML по-прежнему рендерится на сервере, но Turbo теперь может отображать плавный переход между страницами, аналогичный роутингу на клиенте, в SPA.

#### Server state management (MPA) против client state management (SPA)

SPA - это превосходная архитектура для веб-сайтов, которые имеют дело со сложным многостраничным управлением состоянием (например, Gmail).
Это связано с тем, что SPA запускает весь веб-сайт как единое приложение JavaScript, что позволяет приложению поддерживать
состояние и память на нескольких страницах. Интерактивные, data-driven приложения, такие как почтовые клиенты и панели администрирования, хорошо
подходят для SPA, потому что сам веб-сайт по своей сути "похож на приложение".


## MPAs лучше чем SPA?

В сравнении MPA и SPA нет "хорошего" и "плохого" выбора. Все сводится к компромиссам.

**Astro делает приоритет на производительность и простоту MPA, потому что это наиболее целесообразно для веб-сайтов, ориентированных на контент.**
Веб-сайты с большим состоянием и со множеством взаимодействий (interactions) могут извлечь больше пользы из архитектуры,
которую предлагают SPA, за счет производительности при первой загрузке.

:::note[Доступность]
MPA используют стандартный элемент `<a>` для навигации.
Это обеспечивает важные функции доступности, такие как управление состояниями фокуса и объявление изменений маршрута, по умолчанию.
:::

## Тематические исследования

Ниже приведены все публичные сравнения с Astro, о которых нам известно:

- [Astro vs. SPA (Next.js)](https://twitter.com/t3dotgg/status/1437195415439360003) - на 94% меньше JavaScript
- [Astro vs. SPA (Next.js)](https://twitter.com/jlengstorf/status/1442707241627385860?lang=en) - на 34% быстрая загрузка
- [Astro vs. SPA (Next.js)](https://vanntile.com/blog/next-to-astro) – на 65% сокращено использование сети
- [Astro vs. SPA (Remix, SvelteKit)](https://www.youtube.com/watch?v=2ZEMb_H-LYE&t=8163s) - "That [Lighthouse score] is incredible."
- [Astro vs. Qwik](https://www.youtube.com/watch?v=2ZEMb_H-LYE&t=8504s) - на 43% быстрее TTI

Если вы знаете историю миграции на Astro или бенчмарк и не видите их в списке, пожалуйста, создайте PR, чтобы добавить их.

## Дополнительные ресурсы

Если вы хотите узнать больше, Surma (Google) и Jake Archibald (Google) записали отличную дискуссию 
[об этой теме.](https://www.youtube.com/watch?v=ivLhf3hq7eM)


